<template>
  <view class="program-card">
    <view class="recent-tag">{{ $t('Appliance.RecentlyUsed.Label.Text') }}</view>
    <view class="program-info">
      <view class="program-header">
        <text class="program-title">{{ program.name }}</text>
        <!-- <text v-if="durationText" class="duration-text">{{ durationText }}</text> -->
      </view>
      <view class="program-main program-options">
        <block v-for="(option, index) in options" :key="index">
          <text class="program-option">
            <block>{{ option.label }}</block>
            <block v-if="option.value">&nbsp;{{ option.value }}</block>
          </text>
        </block>
      </view>
    </view>
    <view v-if="actionName" class="program-action">
      <TextButton vibrate inline size="small" :disabled="disabled" :plain-disabled="plainDisabled" @click="onAction">{{
        actionName || $t('Appliance.RecentlyUsed.StartProgram.Button.Text')
      }}</TextButton>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { HistoryProgram } from '@/api/appliance'
import TextButton from '@/common/textButton.vue'
// import { getTimeTextByDuration } from '@/utils/timeUtils'
import { generalUnitFormatter } from '../view/availableParameterUtils'

const props = defineProps<{
  program: HistoryProgram
  actionName?: string // 操作按钮显示名称
  disabled?: boolean // 完全禁用操作
  plainDisabled?: boolean // 仅样式禁用 仍然触发事件
}>()
const emit = defineEmits<{
  (e: 'action', program: HistoryProgram): void
}>()

// const durationText = computed(() => {
//   const duration = props.program.duration
//   return getTimeTextByDuration(duration)
// })
const options = computed(() => {
  return props.program.options.map((option) => {
    let value = ''
    // 优先取displayvalue
    if (option.displayvalue !== null) {
      value = option.displayvalue
    }
    // 存在value时 取value + unit
    else if (typeof option.value === 'number') {
      value = String(option.value)
    }

    const unit = generalUnitFormatter(option.key, value, option.unit)
    if (unit) {
      value += unit
    }
    return {
      label: option.name,
      value,
    }
  })
})

function onAction() {
  if (props.disabled) return
  emit('action', props.program)
}
</script>

<style lang="less">
.program-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8rpx 0 0;
  padding: 40rpx 32rpx 24rpx;
  height: 148rpx;
  box-sizing: border-box;
  background-color: #f4f4f6;

  .program-info {
    flex: 1;
    overflow: hidden;
  }
  .program-header {
    color: var(--dark-color);
    line-height: 60rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .recent-tag {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #56c396;
    color: #ffffff;
    font-weight: 600;
    font-size: 20rpx;
    line-height: 32rpx;
    padding: 0 8rpx;
    transform: translate(-8rpx, -8rpx);
    z-index: 1;
  }
  .program-title {
    font-weight: 600;
    font-size: 36rpx;
    line-height: 40rpx;
  }
  .duration-text {
    margin-left: 24rpx;
    font-weight: 600;
    font-size: 28rpx;
    line-height: 40rpx;
  }
  .program-main {
    color: #555d69;
  }
  .program-action {
    margin-left: 36rpx;
    transform: translateY(-8rpx); // 修复由于padding上间距较大 导致文字不局中
  }
  .program-options {
    line-height: 34rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .program-option {
    font-weight: 400;
    font-size: 24rpx;
    white-space: nowrap;
    + .program-option {
      margin-left: 24rpx;
    }
  }
}
</style>
